<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:a4j="http://richfaces.org/a4j">

    <h:head>
        <title>.: Supermercado Kwik-E-Mart :.</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="css/app.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap-theme.min.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap.min.css" ></h:outputStylesheet>

    </h:head>

    <h:body class="fondoPagin">
        <div id="wrap" >
            <h:panelGroup id="panelheader">
                <ui:include src="template/Header.xhtml" />
            </h:panelGroup>
            <h:form>
                <div style="margin-left: 20%">
                    <section id="contact-page">
                        <div class="container">
                            <div class="row contact-wrap"> 
                                <div class="status alert alert-success" style="display: none"></div>

                                <div class="col-sm-5 col-sm-offset-1">
                                    <div class="form-group">
                                        <div style="margin-left: 20%">
                                            <div class="center">        
                                                <h2>Iniciar sesion</h2>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Numero de documento</label>
                                        <h:inputText class="form-control" value="#{sessionBean.numDocumento}" required="true"></h:inputText>
                                    </div>
                                    <div class="form-group">
                                        <label>Password </label>
                                        <h:inputSecret class="form-control" value="#{sessionBean.pass}" required="true"></h:inputSecret>
                                    </div>
                                    <div style="text-align: center" class="form-group">
                                        <a4j:commandButton  render="panelheader"
                                                            style="
                                                            font-size: 20px;
                                                            border-radius: 15px 0px 0px 15px; 
                                                            /*                                text-shadow: 1px 2px 2px #D1E3CF;*/
                                                            /*                                background: #ffffff;*/
                                                            /*                                border: 1px #ffffff;*/
                                                            color: #ffffff;
                                                            box-shadow: inset 54px 54px 100px #dd8e0a;
                                                            "
                                                            action="#{sessionBean.autenticar()}" value="Autenticar Usuario"
                                                            oncomplete="if(#{!sessionBean.resultadoAutenticar.ok}){#{rich:component('LoginError')}.show(); }"
                                                            ></a4j:commandButton>

                                    </div>
                                </div>


                            </div><!--/.row-->
                        </div><!--/.container-->
                    </section><!--/#contact-page-->
                </div>
            </h:form>
        </div>
        <div id="footer">
            <ui:include src="template/Footer.xhtml" />
        </div>
        <rich:popupPanel id="LoginError" width="500" height="250" modal="true">
            <f:facet name="controls">

            </f:facet>
            <f:facet name="header">
                <h3 style="text-align: center; color: #ff3333; font-family: serif">Error al realizar el login del cliente</h3>
            </f:facet>
            <h:form id="LoginErrorForm">
                <a4j:region id="LoginErrorRegionForm">
                    <h3 style="text-align: justify; color: #000; font-family: serif">
                        El cliente no pudo autenticarse, Debe ingresar nuevamente las credenciales de ingreso
                    </h3>
                    <br/>
                    <h:panelGroup style="margin-left: 40%;">
                        <h:commandButton style="text-align: center;
                                         font-size: 20px;
                                         border-radius: 15px 0px 0px 15px; 
                                         /*                                text-shadow: 1px 2px 2px #D1E3CF;*/
                                         /*                                background: #ffffff;*/
                                         /*                                border: 1px #ffffff;*/
                                         color: #ffffff;
                                         font-family: serif;
                                         box-shadow: inset 54px 54px 100px #ff3333;"  value="Aceptar" ></h:commandButton>
                    </h:panelGroup>
                </a4j:region>
            </h:form>
        </rich:popupPanel>
    </h:body>
</html>
